<template>
<!-- Vue2 中 template 有且只有一个根目录 -->
  <div>
    <h1>这是一个h1</h1>
    <!-- 插值表达式 -->
    <!-- 语法: 小胡子语法, Mustache语法 -->
    <!-- {{ 表达式 }} -->
    <!-- 在 data 中定义的数据, 可以直接在 template 中使用 -->
    <!-- 表达式: 有结果的式子就是表达式 -->
    <h2>我很有钱: {{ money }} 元</h2>
    <h2>结果1: {{ 1 + 1 }} </h2>
    <h6>姓名: {{ obj.name }} -- {{ obj.age }} </h6>
    <!-- 
      注意事项:
        1. 不能使用语句
        2. 不能再属性中使用
        3. 如果要使用变量, 必须在 data 中先声明
     -->
    <div>
      {{ obj.age >= 18 ? '上网吧': '在家打游戏' }}
      {{ obj.dog.toUpperCase() }}
      </div>
  </div>
</template>

<script>
export default {
  // vue 要求的语法, 在对象中可以写一些属性
  // data: 用于定义数据
  // 函数的返回值是一个对象, 在对象中定义的属性就是 Vue 的数据
  // data: function() {}
  data() {
    return {
      money: 10000,
      obj: {
        name: '张三',
        age: 18,
        dog: 'BigYellow'
      }
    }
  }
}
</script>

<style lang="less">
  div {
    width: 200px;
    height: 600px;
    background-color: pink;
    h1 {
      font-size: 20px;
    }
  }
</style>
